<template>
  <view class="plate-input w-100%">
    <view class="plate-number-box">
      <!-- 前两格 -->
      <view v-for="(item, index) in plateRefArr.slice(0, 2)" :key="'left-' + index" class="plate-item"
        :class="{ active: index === currentPlateIndex }" @click="openPlateKeyboard(index)">
        {{ item || (currentPlateIndex === index ? '' : '') }}
      </view>

      <!-- 中间灰色点 -->
      <view class="separator-dot"></view>

      <!-- 后六格 -->
      <view v-for="(item, index) in plateRefArr.slice(2)" :key="'right-' + index" class="plate-item"
        :class="{ active: index + 2 === currentPlateIndex }" @click="openPlateKeyboard(index + 2)">
        <template v-if="index + 2 === 7 && !plateRefArr[7]">
          <view class="new-energy-placeholder"></view>
        </template>
        <template v-else>
          {{ item || (currentPlateIndex === index + 2 ? '' : '') }}
        </template>
      </view>
    </view>

    <view class="plate-keyboard w100%" v-if="showPlateKeyboard">
      <view class="keyboard-box w100%">
        <view class="keyboard-row wrap w100%">
          <view class="keyboard-key" v-for="(key, keyIndex) in currentFlatKeyboardLayout" :key="keyIndex"
            @click="selectPlateChar(key)">
            {{ key }}
          </view>
        </view>
        <view class="keyboard-actions">
          <view class="action-btn delete-btn" @click="deletePlateChar">删除字符</view>
          <view class="action-btn confirm-btn" @click="confirmPlateInput">确认车牌</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>

const provinceChars = ['京', '沪', '粤', '津', '渝', '冀', '晋', '辽', '吉', '黑', '苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '琼', '川', '贵', '云', '陕', '甘', '青', '蒙', '桂', '宁', '新', '藏', '港', '澳'];
const letterChars = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
const numberChars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
});
const emit = defineEmits(['update:modelValue', 'input', 'confirm']);

const plateRefArr = ref(['', 'A', '', '', '', '', '', '']);
const currentPlateIndex = ref(-1);
const showPlateKeyboard = ref(false);

const cachedLayouts = {
  province: provinceChars,
  letter: letterChars,
  all: [...letterChars, ...numberChars]
};

const currentFlatKeyboardLayout = computed(() => {
  if (currentPlateIndex.value === 0) {
    return cachedLayouts.province;
  } else if (currentPlateIndex.value === 1) {
    return cachedLayouts.letter;
  } else {
    return cachedLayouts.all;
  }
});

function openPlateKeyboard(index) {
  if (currentPlateIndex.value !== index || !showPlateKeyboard.value) {
    currentPlateIndex.value = index;
    showPlateKeyboard.value = true;
  }
}

function selectPlateChar(char) {
  if (plateRefArr.value[currentPlateIndex.value] !== char) {
    plateRefArr.value[currentPlateIndex.value] = char;
    if (currentPlateIndex.value < plateRefArr.value.length - 1) {
      currentPlateIndex.value++;
    } else {
      confirmPlateInput();
    }
  }
}

function deletePlateChar() {
  if (plateRefArr.value[currentPlateIndex.value]) {
    plateRefArr.value[currentPlateIndex.value] = '';
  } else if (currentPlateIndex.value > 0) {
    currentPlateIndex.value--;
    plateRefArr.value[currentPlateIndex.value] = '';
  }
}

function confirmPlateInput() {
  showPlateKeyboard.value = false;
  const plateNum = plateRefArr.value.filter((item, index) => !(index === 7 && item === '')).join('');
  emit('update:modelValue', plateNum);
  emit('input', plateNum);
  emit('confirm', plateNum);
  currentPlateIndex.value = 8
}

watch(
  () => props.modelValue,
  (newVal) => {
    if (newVal && newVal.length > 0) {
      const newPlateArr = newVal.split('').concat(Array(8 - newVal.length).fill(''));
      // if (JSON.stringify(newPlate) !== JSON.stringify(plateNumber.value)) {
      //   plateNumber.value = newPlate;
      // }
      if (newVal !== plateRefArr.value.join('')) {
        plateRefArr.value = newPlateArr;
      }

    }
  },
  { immediate: true }
);

</script>

<style lang="scss" scoped>
.plate-number-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12rpx;
  user-select: none;
  margin-top: 10rpx;
}

.left-part,
.right-part {
  display: flex;
  gap: 8rpx;
}

.separator-dot {
  font-size: 12rpx;
  width: 12rpx;
  height: 12rpx;
  user-select: none;
  align-self: center;
  /* padding: 0 6rpx; */
  background-color: #F0F2F5;
  border-radius: 50%;
}

.plate-item {
  width: 68rpx;
  height: var(--plate-box-height, 88rpx);
  line-height: var(--plate-box-height, 88rpx);
  text-align: center;
  background-color: #F7F8FA;
  border-radius: 6rpx;
  font-size: 28rpx;
  color: #1F1F1F;
  cursor: pointer;
  user-select: none;
}

.plate-item.active {
  border: 2rpx solid var(--main-color);
  background-color: var(--plate-box-active-bg, #baace649);
}

.new-energy-placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 22rpx;
  color: var(--main-color);
  line-height: 1.2;
  user-select: none;
  position: relative;
  z-index: 0;
}

.new-energy-placeholder::before {
  content: "新能源";
  writing-mode: vertical-rl;
  text-align: center;
  position: absolute;
  inset: 0;
  opacity: 0.5;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 4rpx;
  font-size: var(--plate-box-eg-fsize, 20rpx);
}

.plate-keyboard {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 9999;
  padding: 32rpx;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  box-shadow: 0px -8rpx 16rpx rgba(0, 0, 0, 0.08); 
}

.keyboard-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
  justify-content: space-between;
}

.keyboard-row.wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10%, max-content));
  justify-content: center;
}

// .keyboard-row.wrap:after {
//   content: "";
//   grid-column: 1 / -1;
// }

.keyboard-key {
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 88%;
  height: 88%;
  line-height: 60rpx;
  text-align: center;
  background: #F5F5F5;
  border-radius: 10rpx;
  font-size: 36rpx;
  user-select: none;
  cursor: pointer;
  margin: 1%;
}

.keyboard-key:active {
  background-color: #c6c6c6;
  transform: scale(1.04);
}

.keyboard-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 16rpx;
  padding: 4rpx 16rpx;
  width: 100%;
}

.action-btn {
  display: flex;
  flex-direction: column;
  height: 60rpx;
  width: 45%;
  line-height:24rpx;
  text-align: center;
  font-size: 24rpx;
  border-radius: 84rpx;
  margin: 0 8rpx;
  user-select: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding-top: 6rpx;
  padding-bottom: 6rpx;
}

.action-btn:active {
  opacity: 0.9;
}

.delete-btn {
  background: #E0E0E0;
}

.confirm-btn {
  background: var(--main-color-light);
  color: #fff;
}
</style>